<template>
    <div class="process-monitoring-box">
        <commpVxeTable
         :key="dataTableKey"
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         ref="acceptanceRegistrationRef"
         @checkboxChange="selectedRowKeysChange"
         @searchEvent="searchEvent"
         @resetEvent="resetEvent"
         >
         <!-- <DatePicker mode="year" /> -->
            <template v-slot:year_slotName="{data}">
                <a-date-picker :style="{width:data.widthString}" mode="year" format='YYYY' v-model="searchYear" 
                @panelChange="($event,val)=>{ searchYear = $event;dataTableConfig.paramet={...dataTableConfig.paramet,year:moment(searchYear).format('YYYY')}}" />
            </template>
            <template v-slot:externalOperations="{data}">
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="shareQRCodeClick()">分享二维码</a-button>
                    </template>
                </vxe-form-item>
                
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="returnFillingClick()">退回填写</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="mergeExport()">分类导出</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="exportTableClick()">合并类别导出</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button class="red-btn" type="primary" @click="batchDeleteClick()">批量删除</a-button>
                    </template>
                </vxe-form-item>
                
            </template>
            <template v-slot:flx_name="{data}" >
                <a-tree-select
                    :style="{width: data.widthStringT}"
                    v-modal:value="flxVlaue"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    placeholder="请选择专家分类"
                    allow-clear
                    multiple
                    tree-default-expand-all
                    @change="onChange"
                >
                    <a-tree-select-node v-for="(item,index) in flxList" :key="index+'-'+item.type1" :value="item.type1" :title="item.type1">
                        <a-tree-select-node v-for="(trem,tIndex) in item.type2List" :key="item.type1+'&'+trem" :value="item.type1+'&'+trem" :title="item.type1+'-'+trem">
                        </a-tree-select-node>
                    </a-tree-select-node>
                </a-tree-select>
            </template>
            <template v-slot:fsfzh_name="{row}">
                <a @click="viewClick(row)">{{ row.fsfzh }}</a>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="viewClick(row)">查看</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button class="red-btn" type="primary" @click="deleteClick(row)">删除</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="exportClick(row)">下载</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <increase ref="refModel"/>
        <QRQueryResults ref="QRQueryResultsRef" />
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import increase from './increase.vue'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import { dictzjflDict } from '../accountManage/service/index'
import {
    queryJobByJobIdServe,
    getSqsxBm,
    spcyJcydjbfqJcydjb,
    spcyJcydjbreplateFile,
    spcyJcydjbexportExcelJcydjxq,
    spcyJcydjbupdateSjcjzt,
    spcyJcydjbexportAllJcylbExcelZip,
} from './service/index'
import QRQueryResults from './QRQueryResults.vue'
import moment from 'moment'
export default {
    components:{
        commpVxeTable,
        increase,
        QRQueryResults,
    },
    props:{

    },
    data(){
        return{
            dataTableKey:null,
            addEditParameter:{},
            moment:moment,
            formItem:[
                {
                    label: '姓名',
                    model: 'realname',
                },{
                    label: '身份证号',
                    model: 'fsfzh',
                },{
                    label: '工作单位',
                    model: 'fgzdw',
                },{
                    label: '专家分类',
                    model: 'flx',
                    slotName:'flx_name'
                    
                },{
                    label: '年份',
                    model: 'year',
                    slotName:'year_slotName',
                },{
                    label: '账号状态',
                    model: 'fzhzt',
                    type:'Select',
                    dictionaryType:'审评员登记表账号状态'
                },{
                    label: '采集状态',
                    model: 'fsjcjzt',
                    type:'Radio',
                    dictionaryType:'审评员登记表采集状态',
                    defaultValue:'已提交'
                }],//
            columnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '身份证号', //列头显示文字
                field: 'fsfzh',
                slots: { default: 'fsfzh_name' },
                width:185,
            },{
                title: '姓名', //列头显示文字
                field: 'realname',
            },{
                title: '工作单位以及部门',
                field: 'fgzdw',
            },{
                title: '专家分类', //列头显示文字
                field: 'flx',
            },{
                title: '填报时间',
                field: 'ftxrq',
            },{
                title: '采集状态',
                field: 'fsjcjzt', 
            },{
                title: '账号状态',
                field: 'fzhzt', 
            },{
                title: '操作',
                field: 'id',
                slots: { default: 'operation_btn' },
                fixed: 'right',
                width:260,
            }],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                fywflcode:blobType.fywflcodeArr[blobType.menuType.indexOf(this.$route.name.substring(this.$route.name.indexOf('__'),this.$route.name.indexOf('_a')+2))],
                paramet:{
                    fsjcjzt:'已提交'
                }
            },
            selectedRowKeysArr:[],
            searchFrom:{},
            searchYear:'',
            flxVlaue:[],
            flxList:[],
            flxRes:[],
        }
    },
    watch:{

    },
    mounted(){
        dictzjflDict().then(res=>{
            if(res.code == 200){
                console.log('我获取到了什么树形',res)
                this.flxList = res.result
            }else{

            }
        })
    },
    methods:{
        cjhfClick(){
            this.$route.push('/enterpriseWithdrawalApplication/index')
        },
        timeProcessing(val){
            if(val){
                val = val.slice(0,11)
            }
            return val
        },
        shareQRCodeClick(){//分享二维码
            this.$refs.QRQueryResultsRef.visibleQRQrCode = true
            this.$refs.QRQueryResultsRef.getData()
        },
        batchDeleteClick(){//批量删除
            var that = this
            if(this.selectedRowKeysArr.length){
                this.$confirm({
                    title:'确认要删除吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        spcyJcydjbfqJcydjb({id:that.selectedRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.dataTableKey = Date.now()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请先选择导出项')
            }
            
        },
        returnFillingClick(){//退回填写
            let that = this
            if(this.selectedRowKeysArr.length){
                this.$confirm({
                    title:'确认要退回填写吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        spcyJcydjbupdateSjcjzt({ids:that.selectedRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.dataTableKey = Date.now()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请选择退回填写项')
            }
            
            
        },
        searchEvent(searchFrom){//搜索
            this.searchFrom = {...this.dataTableConfig.paramet,...searchFrom}
        },
        resetEvent(){
            this.flxVlaue = []
            this.flxRes = []
            this.searchYear = ''
            this.dataTableConfig.paramet.year = ''
            this.dataTableConfig.paramet.flx = ''
        },
        selectedRowKeysChange(row){//获取选中表格rowKey
            this.selectedRowKeysArr = []
            row.forEach(item => {
                this.selectedRowKeysArr.push(item.id)
            });
        },
        exportTableClick(){//导出
            
            var that = this
            this.leadingOutLoading = true
            var fileName = '观察员文件'
            let param = { }
            if(that.selectedRowKeysArr.length){
                param = {
                    ids:that.selectedRowKeysArr.join(','),
                }
            }else{
                param = {...that.searchFrom}
            }
            
            spcyJcydjbexportExcelJcydjxq(param).then((data) => {
                this.leadingOutLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
        mergeExport(){
            var that = this
            var fileName = '审评类型合并.zip'
            spcyJcydjbexportAllJcylbExcelZip({}).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data]), { type: blobType.type[blobType.suffix.indexOf('.zip')] })
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
            })
        },
        exportClick(val){//下载
            var that = this
            spcyJcydjbreplateFile({id:val.id}).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let index = blobType.suffix.indexOf('.pdf')
                    let url = window.URL.createObjectURL(new Blob([data], { type:blobType.type[index] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', '审评员登记表' + '.pdf')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                // }
            })
        },
        viewClick(row){//查看
            this.$refs.refModel.visible = true
            this.$refs.refModel.getData(row.id)
        },
        deleteClick(val){//删除
            var that = this
            this.$confirm({
                title:'确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcyJcydjbfqJcydjb({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$refs.acceptanceRegistrationRef.searchEvent()
                            that.$message.success(res.message)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        async onChange(value, node){
            console.log('selectvalue',value)
            let res= []
            let arr = value.filter(a=>a.indexOf('&') == -1)
            let zjArr = value.filter(a=>a.indexOf('&') !== -1)
            if(arr.length && zjArr.length){
                arr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }else if(arr.length){
                res = arr
            }else if(zjArr.length){
                let fjArr = []
                await zjArr.forEach((item,index)=>{
                    let i = item.split('&')
                    let dd = fjArr.filter(u=>u == i[0])
                    if(!dd.length){
                        fjArr.push(i[0])
                    }
                    
                })
                fjArr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }
            console.log('最终结果',res)
            let resArr = res.map(i=>{return {fj:i.fj?i.fj:i,zj:i.zj && i.zj.length?i.zj.map(k=>{return k.split('&')[1]}):[]}})
            console.log('最终结果2',resArr)
            // res.map(a=>{ return a.fj+a.})
            this.flxRes = resArr.map(a=>{return a.zj.length?a.fj+'('+a.zj.join('、')+')':a.fj})
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                flx:this.flxRes.length?this.flxRes.join(','):'',
            }
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
    }
}
</script>